<template>
	<div class="history-record-box">
		<HeaderCom :title="'我的关注'"></HeaderCom>
        <div v-if="isFocus" class="main-box">      
            <ul>
                <van-list
                    v-model="loading"
                    :finished="finished"
                    finished-text="没有更多了"
                    @load="onLoad"
                    >
                <li class="item" v-for="(item,i) in attentionList" @click="linkLiveFormAttebtion(item.acct,item.roomId)" :key="i">
                    <div class="item-left">
                        <img :src="item.imagUrl" alt="">
                        <LiveStatus :small='true' :status="item.roomStatus"></LiveStatus>
                    </div>
                    <div class="item-right">
                        <h3>{{item.title}}</h3>
                        <h5>{{item.subTitle}}</h5>
                    </div>
                </li>
                </van-list>
            </ul>
        </div>
      <NoData v-else :img="noDataImg" :tip="'暂无关注视频'"></NoData>
	</div>
</template>

<script>
	import HeaderCom from '../components/headerCom';//搜索组件
    import LiveStatus from '../components/liveStatus';//直播状态
    import NoData from './noData.vue';//无数据
		export default {
		components: {
			HeaderCom,
            LiveStatus,
            NoData,
		},
		data() {
			return {
                isFocus:true,
                noDataImg:require('../../assets/images/zhxyk/no_focus.png'),
                page:1,
                loading:false,
                finished: false,
                attentionList:[],
			}
		},
		computed: {

		},
		created() {
              this.$store.dispatch("hideNav");
              this.dotNumPage();
		},
		mounted: function() {
		},
		methods: {
                onLoad(){
                 this.getGzList()
                },
            	getGzList(){
				this.$http.get("/h5live/gz?page=" + this.page).then(
					res => {			
                    let {code,data} = res.data
                    if(code=='000000' && data.length >0){
                        this.loading = false
                        if(data.length == 10){
                            this.page++
                        }else{
                          this.finished = true
                        }
                       this.attentionList = this.attentionList.concat(data)
                    }else{
                      this.isFocus= false
                    }
					},
					err => {}
				);
			},
            dotNumPage() { //统计
				let _this = this;
				var argumentData = {
					sessionId: "mineAttention_page", //场次id
					streamType: 12, //视频类型：1-预告 2-直播 3-回看 10-全局统计 11-商品点击 12-页面
					actionValue: 1, //行为：1-进入 2-离开 3-点击播放 4-留言 5-点赞 6-关注 7-分享 8-开播 9-关播 10-最高峰值
					playSource: fun.getPlatform(), //微信 app 游客为web
					url: window.location.href, //当前的url
				};
				_this.$http.post("/h5live/recordData", argumentData, {
						headers: {
							"Content-Type": "application/json"
						}
					})
					.then(
						res => {
							//console.log(res)
						},
						err => {
							console.log(err);
						}
					);
			},
		}
	}
</script>


<style scoped="scoped">
	.history-record-box{
		width: 100vw;
		height: 100vh;
		background: white;	
	}
    .main-box{
        height: calc(100vh - 88px);
        padding-left: 30px;
        padding-right: 19px;
        padding-top: 34px;
        width: 100vw;
        overflow-y: scroll;
    }
    .item{
        display: flex;
        margin-bottom: 27px;
    }
    .item-left{
        position: relative;
        margin-right: 20px;
    }
    .item-left img{
        height:188px;
        width: 330px;
        border-radius: 10px;
    }
	.item-left .live-status-box{
        position: absolute;
        right: -18px;
        top: 0px;
        transform: scale(0.7);
    }
    .item-right{
        width: 351px;
        margin-right: 19px;
    }
    .item-right h3{
        width: 100%;
        padding-top: 3px;
        margin-bottom: 16px;
        font-size: 30px;
        font-weight: 400;
        color: #333333;
        letter-spacing: 1px;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }
     .item-right h5{
        width: 100%;
        margin-bottom: 62px;
        font-size: 28px;
        font-weight: 400;
        color: #ACACAC;
        letter-spacing: 1px;
        display: -webkit-box;
        -webkit-line-clamp:2;
        overflow: hidden;
        text-overflow: ellipsis;
        -webkit-box-orient: vertical;
    }
</style>